import React, { useEffect } from 'react';
import { Button, TreeSelect } from 'antd';
import styles from './index.module.less';
import { useDispatch, useSelector } from 'react-redux';
import {
  get_subject_tree_async,
  get_topic_two_list,
  select_active_two,
  select_subject_tree,
  set_subject_active_topic,
  set_subject_active_two,
} from '@/redux/slice/subject';
import { AppDispatch } from '@/redux';
import SubjectList from './components/subjectList';
import SubjectDetial from './components/subjectDetail';
import useRenderCheck from '@/hooks/useRenderCheck';

//页面11 考题录入页面
const SubjectAdd: React.FC = () => {
  useRenderCheck('SubjectAdd');
  const dispatch: AppDispatch = useDispatch();
  //课程列表
  const treeData = useSelector(select_subject_tree);
  //当前学科
  const active_two_obj = useSelector(select_active_two);

  const onChange = (id: string, title: any) => {
    // console.log('二级课程id', id)
    // console.log('二级课程名称title', title)
    dispatch(
      set_subject_active_two({
        title: title[0],
        value: id,
      }),
    );
  };
  const add_topic: any = () => {
    dispatch(set_subject_active_topic(null));
  };

  useEffect(() => {
    //1 初始化的时候调用 get_subject_tree_async这个接口
    dispatch(get_subject_tree_async()).then((res) => {
      // console.log('res', res)
      const active_two_subject = res.payload[0].children[0];
      dispatch(set_subject_active_two(active_two_subject));
    });
  }, []);
  useEffect(() => {
    dispatch(get_topic_two_list(active_two_obj.value));
  }, [active_two_obj.value]);
  return (
    <div className={styles.wrap}>
      <div className={styles.top}>
        <h1>{active_two_obj.title}</h1>
        <TreeSelect
          style={{ width: '250px', margin: '0 20px' }}
          value={active_two_obj.value}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={treeData}
          placeholder="计算机网络基础"
          treeDefaultExpandAll
          onChange={onChange}
        />
        <Button type="primary" onClick={add_topic}>
          新增题目
        </Button>
      </div>
      <div className={styles.content}>
        <div className={styles.left}>
          <SubjectList />
        </div>
        <div className={styles.right}>
          <SubjectDetial />
        </div>
      </div>
    </div>
  );
};

export default SubjectAdd;
